<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { Locale } from 'vant'
import BScroll from "better-scroll";

definePageMeta({
  layout: 'default-yellow',
  // name: 'home',
  title: 'activity',
  i18n: 'menu.activity',
});
const swiperList = ref([
  {
    id: 1,
    img: '/img/daily.png',
    name: '每日签到',
    show: false,
  },
  {
    id: 2,
    img: '/img/daily.png',
    name: '每月签到',
    show: false,
  },
])
const tableData = ref([
  {
    id: 1,
    vip: 'vip1',
    dailyGold: 10000,
    amount: 10000,
    recharge: 100,
    number: 1,
  },
  {
    id: 2,
    vip: 'vip2',
    dailyGold: 10032,
    amount: 10032,
    recharge: 388,
    number: 1,
  },
  {
    id: 3,
    vip: 'vip3',
    dailyGold: 10032,
    amount: 10032,
    recharge: 388,
    number: 1,
  },
  {
    id: 4,
    vip: 'vip4',
    dailyGold: 10032,
    amount: 10032,
    recharge: 388,
    number: 1,
  },
])
const handleClick = (item: any) => {

}
</script>

<template>
  <div>
    <div v-for="item in swiperList" :key="item.id" class="item mb-10" @click="item.show =!item.show">
      <img :src="item.img" alt="" class="w-full h-106">
      <div class="py-8 px-15 bg-#ffffff text-#3e2e1c0 font-bold">{{ item.name }}</div>
      <div class="p-10 bg-#ffffff" v-if="item.show">
        <div class="color-#908e8e text-12">2025/05/01 - 长期</div>
        <div class="color-#908e8e text-12"><van-icon name="underway-o" class="mr-5" />剩余时间：<span
            class="color-#c11c1c">长期</span></div>
        <div class="go">前往活动</div>
          <table class="w-full">
            <tr class="first">
              <th :colspan="5" class="py-15 text-18 color-#59490a">标题</th>
            </tr>
            <tr class="two">
              <th>VIP</th>
              <th>每日金币</th>
              <th>金额</th>
              <th>充值</th>
              <th>数量</th>
            </tr>
            <tr v-for="item in tableData" :key="item.id" class="cont">
              <td class="vip">{{ item.vip }}</td>
              <td class="">{{ item.dailyGold }}</td>
              <td class=" ">{{ item.amount }}</td>
              <td class=" recharge">{{ item.recharge }}</td>
              <td class="">{{ item.number }}</td>
            </tr>
          </table>
      </div>
    </div>
  </div>

</template>

<style lang="css" scoped>
.item {
  border: 4px solid #ffd657;
  /* 边框宽度 = 图片切图中的边角大小 */
  border-image-source: url('/img/border_box.png');
  background-size: 100% 100%;
  /* padding: 15px; */
  border-image-slice: 4;
  /* 切分九宫格的像素值，和上面 border-width 一致 */
  border-image-repeat: stretch;
  /* 拉伸模式，也可以是 round / repeat / space */
}

.go {
  background-image: linear-gradient(0deg,
      #f40000 0%,
      #ff2828 100%),
    linear-gradient(#d9d8d4,
      #d9d8d4);
  border-radius: 5px;
  color: #ffffff;
  padding: 12px 0;
  text-align: center;
  font-size: 14px;
  margin: 10px 0;
}

table {
  border: 2px solid #ffd657;
  border-image-source: url('/img/border_box.png');
  background-size: 100% 100%;
  padding: 15px;
  border-image-slice: 2;
  border-image-repeat: stretch;
  /* border-radius: 15px; */
  /* width: 100%;
  border:2px solid #ffeb81;
  */
}

table th {
  color: #7c672b;
  font-size: 14px;
}

td,
th {
  min-width: 60px;
  padding: 10px 0;
  text-align: center;
}

.first {
  background: url('/img/table_title_bg.png') no-repeat left top;
  background-size: cover;
  padding: 10px 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

tr.two {
  background: url('/img/act_title2_bg.png') no-repeat;
  background-size: 100% 100%;

}
.cont .recharge{
  color: #ff9024;
  font-weight: bold;
}
.cont .vip{
  font-weight: bold;
}
.two th {
  padding: 10px 0;
}

.cont td {
  padding: 10px 0;
  text-align: center;
  font-size: 14px;
  color: #777777;
}

.cont:nth-child(even) td {
  background-color: #f7f6e2;
  /* 红色背景色 */
}
</style>